<template>
  <div id="detailContain" class="slide-enter-active">
    <Header title="影片详情" >
      <i class="iconfont icon-right" @click="handToBack"></i>
    </Header>
    <div id="content" class="contentDetail" >
      <div class="detail_list">
        <div class="detail_list_bg"></div>
        <div class="detail_list_filter"></div>
        <div class="detail_list_content" >
          <div class="detail_list_img">
            <img :src="movieDetail.img" >
          </div>
          <div class="detail_list_info" >
            <h2>{{ movieDetail.nm }}</h2>
            <p>{{ movieDetail.nm }}</p>
            <p>{{ movieDetail.sc }}</p>
            <p>{{ movieDetail.cat }}</p>
            <p>中国大陆 / {{ movieDetail.dur }}分钟</p>
            <p>{{ movieDetail.onlineDate }}</p>
          </div>
        </div>
      </div>
      <div class="detail_intro">
        <p>{{ movieDetail.dra}}</p>
      </div>
     <h3>剧照：</h3>
      <div class="detail_player swiper-container">
        <ul class="swiper-wrapper" id="scroll">
          <li v-for="(item,index) in movieDetail.photos" :key="index" class="swiper-slide">
            <div class='MostExpected'>
              <img :src="item | setWH('140.127')" alt="">
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  name:'detailName',
  data(){
    return {
      movieDetail:[]
    }
  },
  components: {
    Header
  },
  props:['movieId'],
  methods:{
    handToBack(){
      this.$router.back();
    }
  },
  mounted() {
     this.axios.get('movie/detail?movieId='+this.movieId).then((re) =>{
      this.movieDetail = re.data.movie
      console.log(this.movieDetail)
    })
  }

}
</script>

<style scoped>
::-webkit-scrollbar{
  display:none;
}
#scroll {
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
  height: 200px;

}
.MostExpected {
  margin: 0 15px;
  overflow: scroll;
  overflow-x:hidden;
}
#detailContain{  position: absolute; left: 0; top: 0; z-index: 100; width: 100%; min-height: 100%; background-color: white;}
#detailContain .slide-enter-active{ animation:.3s slideMove;}
@keyframes slideMove{
  0%{ transform : translateX(100%); }
  100%{ transform : translateX(0); }
}
#content.contentDetail{ display: block; margin-bottom:0;}
#content .detail_list{ height:200px; width:100%; position: relative; overflow: hidden;}
.detail_list .detail_list_bg{ width:100%; height:100%; background: url() 0 40%; filter: blur(20px); background-size:cover; position: absolute; left: 0; top: 0;}
.detail_list .detail_list_filter{ width:100%; height:100%; position: absolute;background-color: #40454d;opacity: .55; position: absolute; left: 0; top: 0; z-index: 1;}
.detail_list .detail_list_content{ display: flex; width:100%; height:100%; position: absolute; left: 0; top: 0; z-index: 2;}
.detail_list .detail_list_img{ width:108px; height: 150px; border: solid 1px #f0f2f3; margin:20px;}
.detail_list .detail_list_img img{ width:100%; height: 100%;}
.detail_list .detail_list_info{ margin-top: 20px;}
.detail_list .detail_list_info h2{ font-size: 20px; color:white; font-weight: normal; line-height: 40px;}
.detail_list .detail_list_info p{ color:white; line-height: 20px; font-size: 14px; color:#ccc;}

.swiper-wrapper img{
  width: 140px;
  height: 127px;
  overflow-x: auto;
}
</style>
